<template>
	<view>
		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>
		<!-- 轮播图  -->
		<view>
			<gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" borderRadius="0rpx" :width="750"
				:height="330"></gui-swiper>
		</view>
		<!-- 商品标题 分享按钮 -->
		<view class="gui-list gui-padding">
			<view class="gui-list-items">
				<view class="gui-list-image ucenter-face gui-relative">
					<image class="gui-list-image ucenter-face-image"
						:src="avatar_pic"
						mode="aspectFill"></image>
				</view>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-color">{{nickname}}（{{identity}}）</text>
					</view>
					<text class="gui-list-body-desc gui-color-gray gui-block">擅长方向：{{shanchang}}</text>
					<text class="gui-list-body-desc gui-color-gray gui-block">工作经验：{{qiuling}}</text>
				</view>

			</view>
		</view>


		<view style="margin-top:66rpx;margin-left: 40rpx;" class="gui-padding-x  gui-color-black">
			<text class="gui-h6 gui-color-gray gui-bold">可选择门店</text>
		</view>


		<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
			<gui-select-list @change="change1" :items="lists"></gui-select-list>
		</view>

		<view style="margin-top:66rpx;margin-left: 40rpx;" class="gui-padding-x  gui-color-black">
			<text class="gui-h6 gui-color-gray gui-bold">当天可选择时间（可多选）</text>
		</view>

		<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
			<gui-select-list :items="lists2" iconSize="42rpx" :maxSize="2" @maxSed="maxSed" @change="change2"
				type="checkbox" checkedType="ring"></gui-select-list>
		</view>

		<view style="height:50rpx;"></view>

		<view class="gui-flex">
			<button type="default" class="gui-button gui-bg-primary gui-noborder gui-flex1">
				<text class="gui-icons gui-color-white gui-button-text">立即下单</text>
			</button>
			<button type="default" class="gui-button gui-bg-primary gui-noborder gui-flex1" style="margin-left: 20rpx;">
				<text class="gui-icons gui-color-white gui-button-text">选择以后的时间</text>
			</button>
		</view>




		<!-- 底部占位 -->
		<view style="height:120rpx;"></view>
	</view>
</template>
<script>
	var face =
		"https://images.unsplash.com/photo-1663717249250-804cb861ed74?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5M3x8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80";
	var img =
		"https://images.unsplash.com/photo-1657310217094-2214abf4fd88?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxNTN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60";
	export default {
		data() {
			return {
				id:0,
				avatar_pic:'',
				nickname:'',
				shanchang:'',
				qiuling:'',
				identity:'',
				lists: [
				],
				lists2: [{
						title: "10:00~11:00",
						desc: "可预约",
						checked: false
					},
					{
						title: "11:00~12:00",
						desc: "可预约",
						checked: false
					},
					{
						title: "12:00~13:00",
						desc: "可预约",
						checked: true
					},
					{
						title: "13:00~14:00",
						desc: "可预约",
						checked: false
					},
				],
				commentContents: [{
						"content": "故国三千里，深宫二十年。一声何满子，双泪落君前。",
						"name": "回复昵称",
						"face": face,
						"date": "08/10 08:00",
						"praise": 188,
						"isPraise": false,
						"Reply": [{
								'name': "张晓曦",
								"content": "不错不错"
							},
							{
								'name': "王大陆",
								"content": "赞了~"
							},
						]
					},
					{
						"content": "而今渐行渐远，渐觉虽悔难追。漫寄消寄息，终久奚为。也拟重论缱绻，争奈翻覆思维。纵再会，只恐恩情，难似当时。",
						"name": "路过繁华",
						"face": face,
						"date": "02/10 18:00",
						"praise": 288
					},
				],
				imgUrl: "https://images.unsplash.com/photo-1663697651653-68fe83aa6f30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=100&q=90",
				// 轮播图 
				swiperItems: [
				],
				// 切换导航
				navItems: [{
					id: 0,
					name: '商品详情'
				}, {
					id: 1,
					name: '相关评论'
				}],
				// 切换索引
				active: 0,
				// 属性选择
				attrShow: false,
				colors: [{
						id: 1,
						text: "红色",
						checked: false
					},
					{
						id: 2,
						text: "黑色",
						checked: false
					},
					{
						id: 3,
						text: "蓝色",
						checked: false
					}
				],
				sizes: [{
						id: 1,
						text: "10 cm",
						checked: false
					},
					{
						id: 2,
						text: "20 cm",
						checked: false
					},
					{
						id: 3,
						text: "40 cm",
						checked: false
					}
				],
				// 属性记录
				attrRes: {
					color: null,
					size: null,
					number: 1
				},
				// 商品信息
				product: {
					name: "名仕台球（光谷金融港店）",
					logo: "../../static/logo.png",
					price: 3188,
					priceMarket: 3200,
					time: "10:00-23:00",
					imgs: [
						'https://img30.360buyimg.com/sku/jfs/t21838/18/2275707529/311540/cba1d04c/5b4f155fNac3aa2f0.jpg',
						'https://img30.360buyimg.com/sku/jfs/t22021/327/2281785192/48707/57806074/5b4f1579Nae7adb49.jpg',
						'https://img30.360buyimg.com/sku/jfs/t21682/256/2344553276/204456/cf7a2ddb/5b4ffbbfN48c54307.jpg'
					],
					address: "湖北省武汉市东湖高新区光谷金融港B2栋F1"
				},
				artciles: [{
						"id": 1,
						"title": "这是一条动态11111111111111111111111111111111111111111111",
						"imgs": [
							"https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60",
							"https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
						],
						"author": "小雪",
						"views": 320,
						"createTime": "2024-03-10"
					},
					{
						"id": 2,
						"title": "这是一条动态222222222222222222222222222222222222",
						"imgs": [
							"https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60",
							"https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
						],
						"author": "小李",
						"views": 320,
						"createTime": "2024-03-10"
					}
				]
			}
		},
		onLoad:function(query){
			this.$globalMethod();
			if(typeof query.id != 'undefined'){
				this.id = query.id;
				this.order_appointment_info();
			}
		},
		methods: {
			order_appointment_info(){
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.orders/order_appointment_info', //仅为示例，并非真实接口地址。
					data: {
						id: _this.id
					},
					header: {
						token: _this.token
					},
				
					success: (res) => {
				
						_this.$refs.guipageloading.close();
				
						var return_data = res.data;
				
				
						console.log(return_data);
						if (return_data.code == 0) {
						
						_this.avatar_pic=  return_data.data.member_info.avatar_pic;
						_this.nickname=  return_data.data.member_info.nickname;
						_this.shanchang = return_data.data.teacher_info.shanchang;
						_this.qiuling = return_data.data.teacher_info.qiuling;
						_this.swiperItems = return_data.data.teacher_photos;
						_this.lists = return_data.data.teacher_shop_relation_list;
						_this.identity = return_data.data.member_identity_info.identity;
				
						} else {
							uni.showToast({
								title: return_data.msg,
								icon:'error'
							})
						}
					}
				});
			},
			showImgs: function(commentsIndex, imgIndex) {
				console.log(commentsIndex, imgIndex);
				uni.previewImage({
					urls: this.commentContents[commentsIndex].imgs,
					current: this.commentContents[commentsIndex].imgs[imgIndex]
				})
			},
			change1: function(e) {
				console.log(e);
			},
			// 新闻点击
			newstap: function(e) {
				// 获取新闻 id
				var newsId = e;
				console.log(newsId);
				// 打开新闻详情页面
				//uni.navigateTo()
			},
			// 分享
			share: function() {
				uni.showToast({
					title: '请自行完善分享代码',
					icon: "none"
				});
			},
			// 导航切换
			navChange: function(e) {
				this.active = e;
			},
			// 返回首页
			goHome: function() {
				uni.switchTab({
					url: "首页路径"
				});
			},
			// 返回首页
			kf: function() {
				uni.showToast({
					title: '请自行完善分享代码',
					icon: "none"
				});
			},
			// 加入购物车
			addtocard: function() {
				// 选择属性
				this.selectAttr();
			},
			// 购买 
			buynow: function() {
				// 选择属性
				this.selectAttr();
			},
			// 属性选择
			selectAttr: function() {
				// 未选择属性弹出选择
				if (!this.attrShow) {
					this.attrShow = true;
					return;
				}
				// 已选择属性进行订单提交
				// 属性在 attrRes 变量内保存
				if (this.attrRes.color == null || this.attrRes.size == null) {
					uni.showToast({
						icon: "none",
						title: "请选择属性"
					});
				}
				console.log('请完善提交代码');
			},
			colorChange: function(e) {
				this.attrRes.color = e.text;
			},
			sizeChange: function(e) {
				this.attrRes.size = e.text;
			},
			numberChange: function(e) {
				this.attrRes.number = e[0];
			},
			closeAttr: function() {
				this.attrShow = false;
			}
		}
	}
</script>
<style scoped>
	.product-name {
		width: 560rpx;
		line-height: 50rpx;
	}

	.product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 50rpx;
		color: #FF7900;
		line-height: 80rpx;
	}

	.product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.gui-common-line {
		height: 18rpx;
	}

	.product-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.product-attr {
		width: 700rpx;
		margin: 25rpx;
		height: 580rpx;
	}

	/* 卡片视图 */
	.gui-card-view {
		padding: 25rpx;
		margin: 0 30rpx;
		margin-top: 30rpx;
	}

	.gui-card-body {
		padding-bottom: 30rpx;
	}

	.gui-card-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 80rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
	}

	.grid4 {
		width: 172rpx;
	}



	/* 您可以在页面的 style 内直接复写样式达到修改的目的 */

	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}

	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}

	/* #endif */


	.gui-comments-items {
		margin-top: 35rpx;
	}

	.gui-comments-face {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		margin-right: 25rpx;
	}

	.gui-comments-body {
		width: 580rpx;
		overflow: hidden;
	}

	.gui-comments-header-text {
		line-height: 40rpx;
	}

	.gui-comments-info {
		margin-top: 2px;
	}

	.gui-comments-info-text {
		font-size: 22rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.gui-comments-content {
		line-height: 36rpx;
		font-size: 26rpx;
		padding: 8rpx 0;
	}

	.gui-comments-replay {
		font-size: 24rpx;
		color: #666666;
		border-radius: 3px;
		margin: 3px 0;
		padding: 15rpx;
		line-height: 36rpx;
	}

	.gui-comments-replay-btn {
		font-size: 20rpx;
		line-height: 44rpx;
		padding: 0rpx 20rpx;
		border-radius: 44rpx;
	}

	.gui-comments-imgs {
		margin: 8rpx 0;
	}

	.gui-comments-image {
		width: 180rpx;
		height: 128rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		font-size: 0;
		overflow: hidden;
	}
</style>